<!DOCTYPE html>
<html style="height: 100%;">
	<head >
		<meta charset="utf-8" />
		<title>注册</title>
		<!-- 样式标签 -->
		<style>
			.body_class{
				height: 100%;
				background-image: url(img/1.jpg);
				background-size: 100% 100%;
				display: flex;/*设置当前的标签为 弹性盒子模型 */
				flex-direction: row;/* 水平排列 */
				align-items: center;/* 纵向居中 */
				justify-content: center;/* 横向居中 */
			}
			.main_div{
				width: 400px;
				height: 500px;
				background-color: bisque;
				border-radius: 10px;
				box-shadow: 10px 10px 10px #888888;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.title_span{
				margin-top: 30px;
				font-size: 25px;
				font-family: "楷体";
				text-shadow: 5px 5px 5px black;
			}
			.item_div{
				margin-top: 15px;
			}
			.item_div2{
				margin-top: 15px;
				margin-left: 80px;
				display: flex;
				flex-direction: row;
				
			}
			.div_button{
				margin-top: 100px;
				
			}
			
		
		</style>
		<script src="js/jquery.js"></script>
		<!-- js -->
		<script>
		//跳转到登录页面
			function GoLogin(){
				window.location.href="index.html"
			}
			
			//通过ajax的方式进行注册
			function registerAjax(){
				//获取用户的用户名，密码，昵称，邮箱
				//var nickname=doucment.getElementById("nickname")
				
				var nickname1=$("#nickname").val();
				var username1=$("#username").val();
				var password1=$("#password").val();
				var email1=$("#email").val();
				var phone1=$("#phone").val();
				var sex1 =$("[name='sex']:checked").val();
				
				//客户端的参数校验
				if(nickname1==null||nickname1.trim()==""){
					alert("账号不能为空！");
					return;
				}
				if(username1==null||username1.trim()==""){
					alert("账号不能为空！");
					return;
				}
				if(password1==null||password1.trim()==""){
					alert("账号不能为空！");
					return;
				}
				if(email1==null||email1.trim()==""){
					alert("账号不能为空！");
					return;
				}
				if(phone1==null||phone1.trim()==""){
					alert("账号不能为空！");
					return;
				}
				
				
				//发送ajax
				$.ajax({
					type:"POST",
					url:"http://localhost:8080/user/register",
					data:{
						username:username1,
						password:password1,
						nickname:nickname1,
						email:email1,
						phone:phone1,
						sex:sex1
						
					},
					success:function(data){
						//服务器给我返回的结果
						if(data==1){
							alert("恭喜你注册成功")
							location.href="index.html"
						}else if(data==-1){
							alert("用户已注册")
						}else if(data==-2){
							alert("邮箱重复了")
						}
						
					}
				});
			}
		
		</script>
	</head>
	<!-- 网页体 -->
	<body class="body_class">
		
		<!-- 登陆注册的背景框 -->
		<div class="main_div">
			
			<span class="title_span">账号注册</span>
			
			<div class="item_div">
			    昵称：<input id="nickname" placeholder="请输入昵称" />
			</div>
			
			<div class="item_div"> 
			    账号：<input id="username" placeholder="请输入用户名" />
			</div>
			
			<div class="item_div">
			    密码：<input id="password" type="password" placeholder="请输入密码"/>
			</div>
			<div class="item_div">
				邮箱：<input id="email"  placeholder="请输入邮箱"/>
			</div>
			
			<div class="item_div">
				电话：<input id="phone" placeholder="请输入电话"/>
			</div>
			<!-- <div class="item_div2">
				头像：<input  type="file"  >
			</div> -->
			<div>
				性别：
				<input type="radio" name="sex" value="0" checked/>男
				<input type="radio" name="sex" value="1" />女
				
			</div>
			<div class="div_button">
				<button onclick="registerAjax()">注册</button>
				<button onclick="GoLogin()">去登录</button>
			</div>
		</div>
		
		
	</body>
</html>